<!-- 地图区域 -->
<template>
  <!-- 声明ref属性后，可以直接根据.value获取到对应的dom元素 -->
  <div ref="parent" class="gamemap"> <!--画布的父元素-->
    <canvas ref="canvas" tabindex="0"></canvas> <!--画布-->
  </div>
</template>

<script>
import {GameMap} from "@/assets/scripts/GameMap.js";
import {onMounted, ref} from 'vue';
import {useStore} from 'vuex';
export default{
  setup(){
    const store=useStore();
    let canvas = ref(null);
    let parent = ref(null);
    onMounted(()=>{ //组件挂载到DOM后，执行回调函数
      new GameMap(canvas.value.getContext('2d'), parent.value,store) //创建游戏地图 .getContext('2d')是获取Canvas的2D绘图上下文
    });
    return{
      canvas,
      parent
    }
  }
}
</script>

<style scoped>
div.gamemap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 竖直居中 */
}
</style>